$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'bdbusiness/awm/list',
        datatype: "json",
        colModel: [			
			{ label: '国家名称', name: 'country', index: 'country', width: 50, key: true},
//			{ label: '1701月出口金额（万元）', name: 'export1701', index: 'export_1701', width: 80 }, 			
//			{ label: '1702月出口金额（万元）', name: 'export1702', index: 'export_1702', width: 80 }, 			
//			{ label: '1703月出口金额（万元）', name: 'export1703', index: 'export_1703', width: 80 }, 			
//			{ label: '1704月出口金额（万元）', name: 'export1704', index: 'export_1704', width: 80 }, 			
//			{ label: '1705月出口金额（万元）', name: 'export1705', index: 'export_1705', width: 80 }, 			
//			{ label: '1706月出口金额（万元）', name: 'export1706', index: 'export_1706', width: 80 }, 			
//			{ label: '1707月出口金额（万元）', name: 'export1707', index: 'export_1707', width: 80 }, 			
//			{ label: '1708月出口金额（万元）', name: 'export1708', index: 'export_1708', width: 80 }, 			
//			{ label: '1709月出口金额（万元）', name: 'export1709', index: 'export_1709', width: 80 }, 			
//			{ label: '1710月出口金额（万元）', name: 'export1710', index: 'export_1710', width: 80 }, 			
			{ label: '17年出口总金额（万元）', name: 'sumExport', index: 'sum_export', width: 80 }			
        ],
		viewrecords: true,
        height: 385,
        rowNum: 10,
		rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
        	//隐藏grid底部滚动条
        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });

    vm.showGraph();
});

var vm = new Vue({
	el:'#rrapp',
	data:{
		showList: true,
		title: null,
		q:{
			country: '',
        },
		aWm: {}
	},
	methods: {
		query: function () {
            $("#jqGrid").setGridParam({'page': 1});
			vm.reload();
		},
		details: function (event) {
			var id = getSelectedRow();
			if(id == null){
				return ;
			}
			vm.showList = false;
            vm.title = "详情";
            vm.getInfo(id);
		},
		getInfo: function(country){
			$.get(baseURL + "bdbusiness/awm/info/"+country, function(r){
				vm.aWm = r.aWm;
                vm.showe();
            });
		},
		showe: function(){
			var myChart = echarts.init(document.getElementById('showe'));
		    var option = {
		        tooltip: {
		            trigger: 'axis',
		            axisPointer: {
		                type: 'shadow'
		            }
		        },
		        legend: {
		            x: 'center',
		            data:['出口金额（万元）'],
		            y:15,
		            textStyle: {
		                color: '#83828f'
		            }
		        },
		        color: ['#48b7fc','#d85550','#7493bb','#424242','#fff'],
		        grid:{
		              x:60,
		              y:45,
		              x2:40,
		              y2:40,
		              borderWidth:0
		        },
		        xAxis: [
		            {
		                type: 'category',
		                axisLabel: {
		                    show: true,
		                    textStyle: {
		                        color: '#83828f'
		                    }
		                },
		                splitLine :{
		                  show: true,
		                  lineStyle:{
		                    type:'dashed',
		                    color: '#2f2f3f'
		                  }
		                },
		                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月']
		            }
		        ],
		        yAxis: [
		            {
		                type: 'value',
		                axisLabel: {
		                    show: true,
		                    textStyle: {
		                        color: '#83828f'
		                    }
		                },
		                splitLine :{
		                  show: true,
		                  lineStyle:{
		                    type:'dashed',
		                    color: '#2f2f3f'
		                  }
		                },
		            }
		        ],
		        series: [
		            {
		                name: '出口金额（万元）',
		                type: 'bar',
		                barWidth:50,
		                barGap:'5%', //设置bar之间的间距
		                barCategoryGap:'70%', 
		                data: [
		                	vm.aWm.export1701,
		                	vm.aWm.export1702,
		                	vm.aWm.export1703,
		                	vm.aWm.export1704,
		                	vm.aWm.export1705,
		                	vm.aWm.export1706,
		                	vm.aWm.export1707,
		                	vm.aWm.export1708,
		                	vm.aWm.export1709,
		                	vm.aWm.export1710
                		]
		            }
		        ]
		    };

	        myChart.setOption(option);
		},
		showGraph: function(){
			var myChart = echarts.init(document.getElementById('showGraph'));
		    var option = {
		    	    title: {
		    	        text: '数据流'
		    	    },
		    	    tooltip: {},
		    	    animationDurationUpdate: 1500,
		    	    animationEasingUpdate: 'quinticInOut',
		    	    series : [
		    	        {
		    	            type: 'graph',
		    	            layout: 'none',
		    	            symbolSize: 50,
		    	            roam:false,
		    	            label: {
		    	                normal: {
		    	                    show: true
		    	                }
		    	            },
		    	            edgeSymbol: ['circle', 'arrow'],
		    	            edgeSymbolSize: [4, 10],
		    	            edgeLabel: {
		    	                normal: {
		    	                    textStyle: {
		    	                        fontSize: 20
		    	                    }
		    	                }
		    	            },
		    	            data: [{
		    	                name: 'Start',
		    	                x: 50,
		    	                y: 200
		    	            }, {
		    	                name: 'A',
		    	                x: 200,
		    	                y: 200
		    	            }, {
		    	                name: 'B',
		    	                x: 400,
		    	                y: 100
		    	            }, {
		    	                name: 'C',
		    	                x: 400,
		    	                y: 300
		    	            }, {
		    	                name: 'D',
		    	                x: 600,
		    	                y: 200
		    	            }, {
		    	                name: 'End',
		    	                x: 800,
		    	                y: 200
		    	            }],
		    	            links: [{
		    	                source: 'Start',
		    	                target: 'A'
		    	            },{
		    	                source: 'A',
		    	                target: 'B'
		    	            }, {
		    	                source: 'A',
		    	                target: 'C'
		    	            }, {
		    	                source: 'B',
		    	                target: 'D'
		    	            }, {
		    	                source: 'C',
		    	                target: 'D'
		    	            }, {
		    	                source: 'D',
		    	                target: 'End'
		    	            }],
		    	            lineStyle: {
		    	                normal: {
		    	                    opacity: 0.9,
		    	                    width: 2,
		    	                    curveness: 0
		    	                }
		    	            }
		    	        }
		    	    ]
		    	};

	        myChart.setOption(option);
		},
		reload: function (event) {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{ 
                postData: vm.q,
                page:page
            }).trigger("reloadGrid");
		}
	}
});

